<template>
  <div ref="header" class="content1">
    <div
      class="contentBg display-flex flex-direction-column align-items-center justify-content-space-between"
    >
      <div class="display-flex flex-direction-column align-items-center">
        <img class="firstRow" src="../../../assets/compName.png" alt>
        <img class="secondRow" src="../../../assets/slogan.png" alt>
        <div class="thirdRow">订制方案</div>
        <p class="forthRow">
          让好的产品，服务于美好的生活，技术让生活更美好！
          我们服务于对线下具有较强依赖的传统制造型企业，提供一站式的互联网+新零售解决方案打通线上线下，构建企业自媒体平台，重塑新的商业格局，持续提升粉丝价值
        </p>
      </div>
      <img class="fifthRow" src="../../../assets/arrowDown.png" alt>
    </div>
  </div>
</template>
<script>
export default {
  name:'Header',
  mounted:function(){
    this.$store.commit('setHeader',this.$refs['header'])
  }
};
</script>
<style scoped>
.content1 {
  width: 100%;
  background-image: url("../../../assets/headerBg.png");
  background-position: center;
  background-size: cover;
  height: 11.8rem;
}
.contentBg {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.firstRow {
  width: 7.5rem;
  margin-top: 2.1rem;
}
.secondRow {
  width: 10rem;
  margin-top: 0.4rem;
}
.thirdRow {
  color: #fff;
  text-align: center;
  margin-top: 3rem;
  font-size: 0.35rem;
  border: 0.04rem solid #fff;
  padding: 0.06rem 0.6rem;
  font-family: "Microsoft Yahei";
}
.thirdRow:hover {
  background: #fff;
  color: #2a1e17;
  font-weight: bold;
  transition: all 0.5s ease;
}
.forthRow {
  width: 70%;
  text-align: center;
  color: #fff;
  margin-top: 1.4rem;
  font-size: 0.22rem;
  opacity: 0.7;
}
.fifthRow {
  width: 0.6rem;
}
@media screen and (max-width: 500px) {
  .thirdRow{
    margin-top: 2rem;
  }
  .forthRow{
    margin-top: 1rem;
  }
}
</style>
